<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{fragments/layout :: layout(~{::title}, ~{::section})}">
<head>
    <title th:text="#{tools.title}">Tools - SnackMQ Console</title>
</head>
<body>
<section>
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h4 class="h4" th:text="#{tools.developer.tools}">Developer Tools</h4>
    </div>

    <div class="row g-4">
        <!-- Send Test Message Card -->
        <div class="col-md-6">
            <div class="card mb-4 shadow-sm border-0 rounded">
                <div class="card-header" th:text="#{tools.send.test.message}">
                    Send a Test Message
                </div>
                <div class="card-body">
                    <form th:action="@{/tools/send}" method="post" id="sendMessageForm">
                        <div class="mb-3">
                            <label class="form-label" th:text="#{tools.destination.type}">Destination Type</label>
                            <div>
                                <div class="form-check form-check-inline">
                                <!-- 【修复】将 name 和 value 与后端控制器对齐 -->
                                <input class="form-check-input" type="radio" name="destinationType" id="destTopic" value="topic" checked>
                                    <label class="form-check-label" for="destTopic" th:text="#{tools.topic}">Topic</label>
                                </div>
                                <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="destinationType" id="destExchange" value="exchange">
                                    <label class="form-check-label" for="destExchange" th:text="#{tools.exchange}">Exchange</label>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="destination" class="form-label" th:text="#{tools.destination.name}">Destination Name</label>
                            <input type="text" class="form-control" id="destination" name="destination" required>
                        </div>

                        <div class="mb-3" id="routingKeyGroup" style="display: none;">
                            <label for="routingKey" class="form-label" th:text="#{tools.routing.key}">Routing Key</label>
                            <input type="text" class="form-control" id="routingKey" name="routingKey">
                        </div>

                        <div class="mb-3">
                            <label for="messageKey" class="form-label" th:text="#{tools.message.key.optional}">Message Key (Optional)</label>
                            <input type="text" class="form-control" id="messageKey" name="messageKey">
                        </div>

                        <div class="mb-3">
                            <label for="messageBody" class="form-label" th:text="#{tools.message.body}">Message Body</label>
                            <textarea class="form-control" id="messageBody" name="messageBody" rows="3" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary mt-2" th:text="#{tools.send.message}">Send Message</button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Peek Message Card -->
        <div class="col-md-6">
            <div class="card mb-4 shadow-sm border-0 rounded">
                <div class="card-header" th:text="#{tools.peek.message.offset}">
                    Peek a Message by Offset
                </div>
                <div class="card-body">
                    <form th:action="@{/tools/peek}" method="post" th:object="${peekRequest}">
                        <div class="mb-3">
                            <label for="peekTopic" class="form-label" th:text="#{tools.topic.name}">Topic Name</label>
                            <input type="text" class="form-control" id="peekTopic" name="topic" th:field="*{topic}" required>
                        </div>
                        <div class="mb-3">
                            <label for="peekPartition" class="form-label" th:text="#{tools.partition.id}">Partition ID</label>
                            <input type="number" class="form-control" id="peekPartition" name="partition" th:field="*{partition}" min="0" required>
                        </div>
                        <div class="mb-3">
                            <label for="peekOffset" class="form-label" th:text="#{tools.offset}">Offset</label>
                            <input type="number" class="form-control" id="peekOffset" name="offset" th:field="*{offset}" min="0" required>
                        </div>
                        <button type="submit" class="btn btn-info mt-2" th:text="#{tools.peek.message}">Peek Message</button>
                    </form>
                </div>

            <!-- Peek Result Display -->
            <div th:if="${peekResult}" class="card shadow-sm border-0 rounded">
                <div class="card-header" th:text="#{tools.peek.result}">
                    Peek Result
                </div>
                <div class="card-body">
                    <dl class="row">
                        <dt class="col-sm-3" th:text="#{tools.message.id}">Message ID</dt>
                        <dd class="col-sm-9" th:text="${peekResult.messageId}"></dd>

                        <dt class="col-sm-3" th:text="#{tools.key}">Key</dt>
                        <dd class="col-sm-9" th:text="${peekResult.key ?: 'N/A'}"></dd>

                        <dt class="col-sm-3" th:text="#{tools.body}">Body</dt>
                        <!-- 【修复】移除 new String() 调用，直接使用 DTO 中已转换好的 body 字符串 -->
                        <dd class="col-sm-9"><pre><code th:text="${peekResult.body}"></code></pre></dd>

                        <dt class="col-sm-3" th:text="#{tools.properties}">Properties</dt>
                        <dd class="col-sm-9">
                            <ul class="list-unstyled mb-0">
                                <li th:each="prop : ${peekResult.properties}">
                                    <strong th:text="${prop.key} + ':'"></strong>
                                    <span th:text="${prop.value}"></span>
                                </li>
                                <li th:if="${#lists.isEmpty(peekResult.properties)}" th:text="#{tools.no.properties}">No properties</li>
                            </ul>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    <!-- Partition Diagnosis Card -->
    <div class="row g-4 mt-3">
        <div class="col-12">
            <div class="card mb-4 shadow-sm border-0 rounded">
                <div class="card-header" th:text="#{tools.partition.diagnosis}">
                    Partition Diagnosis
                </div>
                <div class="card-body">
                    <form th:action="@{/tools/diagnose}" method="post">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="diagnoseTopic" class="form-label" th:text="#{tools.topic.name}">Topic Name</label>
                                    <input type="text" class="form-control" id="diagnoseTopic" name="topic" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="diagnosePartition" class="form-label" th:text="#{tools.partition.id}">Partition ID</label>
                                    <input type="number" class="form-control" id="diagnosePartition" name="partition" min="0" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">&nbsp;</label>
                                    <button type="submit" class="btn btn-warning d-block" th:text="#{tools.diagnose.partition}">Diagnose Partition</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- Diagnosis Result Display -->
                <div th:if="${diagnosisResult}" class="card-body border-top">
                    <h6 class="card-title" th:text="#{tools.diagnosis.result}">Diagnosis Result</h6>
                    <div class="row">
                        <div class="col-md-6">
                            <h6 th:text="#{tools.basic.information}">Basic Information</h6>
                            <dl class="row">
                                <dt class="col-sm-4" th:text="#{tools.topic}">Topic</dt>
                                <dd class="col-sm-8" th:text="${diagnosisResult.topic}"></dd>
                                <dt class="col-sm-4" th:text="#{tools.partition}">Partition</dt>
                                <dd class="col-sm-8" th:text="${diagnosisResult.partitionId}"></dd>
                                <dt class="col-sm-4" th:text="#{tools.next.offset}">Next Offset</dt>
                                <dd class="col-sm-8" th:text="${diagnosisResult.nextOffset}"></dd>
                                <dt class="col-sm-4" th:text="#{tools.segment.size}">Segment Size</dt>
                                <dd class="col-sm-8" th:text="${diagnosisResult.segmentSize}"></dd>
                                <dt class="col-sm-4" th:text="#{tools.has.corrupted.segments}">Has Corrupted Segments</dt>
                                <dd class="col-sm-8">
                                    <span th:if="${diagnosisResult.hasCorruptedSegments}" class="badge bg-danger" th:text="#{tools.yes}">YES</span>
                                    <span th:unless="${diagnosisResult.hasCorruptedSegments}" class="badge bg-success" th:text="#{tools.no}">NO</span>
                                </dd>
                            </dl>
                        </div>
                        <div class="col-md-6">
                            <h6 th:text="#{tools.segments}">Segments</h6>
                            <div th:each="segment : ${diagnosisResult.segments}" class="mb-2">
                                <strong th:text="${segment.key}"></strong>
                                <ul class="list-unstyled ms-3">
                                    <li th:text="#{tools.base.offset} + ': ' + ${segment.value.baseOffset}">Base Offset: <span th:text="${segment.value.baseOffset}"></span></li>
                                    <li th:text="#{tools.entry.count} + ': ' + ${segment.value.entryCount}">Entry Count: <span th:text="${segment.value.entryCount}"></span></li>
                                    <li th:text="#{tools.log.position} + ': ' + ${segment.value.logPosition}">Log Position: <span th:text="${segment.value.logPosition}"></span></li>
                                    <li th:text="#{tools.active} + ': ' + ${segment.value.isActive}">Active: <span th:text="${segment.value.isActive}"></span></li>
                                    <li th:text="#{tools.corrupted} + ': '">
                                        <span th:if="${segment.value.isCorrupted}" class="badge bg-danger" th:text="#{tools.yes}">YES</span>
                                        <span th:unless="${segment.value.isCorrupted}" class="badge bg-success" th:text="#{tools.no}">NO</span>
                                    </li>
                                    <li th:text="#{tools.log.file} + ': ' + ${segment.value.logFileExists} + ' (' + ${segment.value.logFileSize} + ' ' + #{tools.bytes} + ')'">Log File: <span th:text="${segment.value.logFileExists} + ' (' + ${segment.value.logFileSize} + ' bytes)'"></span></li>
                                    <li th:text="#{tools.index.file} + ': ' + ${segment.value.indexFileExists} + ' (' + ${segment.value.indexFileSize} + ' ' + #{tools.bytes} + ')'">Index File: <span th:text="${segment.value.indexFileExists} + ' (' + ${segment.value.indexFileSize} + ' bytes)'"></span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12">
                            <h6 th:text="#{tools.test.reads}">Test Reads</h6>
                            <div th:each="test : ${diagnosisResult.testReads}" class="d-inline-block me-3 mb-2">
                                <span class="badge" th:classappend="${test.value == 'SUCCESS' ? 'bg-success' : 'bg-danger'}" 
                                      th:text="${test.key + ': ' + test.value}"></span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Repair Button -->
                    <div th:if="${diagnosisResult.hasCorruptedSegments}" class="row mt-3">
                        <div class="col-12">
                            <form th:action="@{/tools/repair}" method="post" style="display: inline;">
                                <input type="hidden" name="topic" th:value="${diagnosisResult.topic}">
                                <input type="hidden" name="partition" th:value="${diagnosisResult.partitionId}">
                                <button type="submit" class="btn btn-danger" 
                                        th:onclick="'return confirm(\'' + #{tools.confirm.repair} + '\');'"
                                        th:text="#{tools.repair.corrupted.segments}">
                                    Repair Corrupted Segments
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Manual Repair Card -->
    <div class="row g-4 mt-3">
        <div class="col-12">
            <div class="card mb-4 shadow-sm border-0 rounded">
                <div class="card-header" th:text="#{tools.manual.partition.repair}">
                    Manual Partition Repair
                </div>
                <div class="card-body">
                    <p class="text-muted" th:text="#{tools.manual.repair.description}">Use this tool to manually repair partition segment structure issues.</p>
                    <form th:action="@{/tools/manual-repair}" method="post">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="manualRepairTopic" class="form-label" th:text="#{tools.topic.name}">Topic Name</label>
                                    <input type="text" class="form-control" id="manualRepairTopic" name="topic" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="manualRepairPartition" class="form-label" th:text="#{tools.partition.id}">Partition ID</label>
                                    <input type="number" class="form-control" id="manualRepairPartition" name="partition" min="0" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">&nbsp;</label>
                                    <button type="submit" class="btn btn-danger d-block" 
                                            th:onclick="'return confirm(\'' + #{tools.confirm.manual.repair} + '\');'"
                                            th:text="#{tools.manual.repair.partition}">
                                        Manual Repair Partition
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <th:block th:replace="~{fragments/js/tools-js}"></th:block>
</section>
</body>
</html>